import React, { Component } from 'react'
import './PCPAW.scss'
import CNs from 'classnames'
export default class PCPAW extends Component {
  constructor() {
    super()
    this.state = {
      flag1: false,
      flag2: false,
      flag3: false,
      hiddle1: false,
      hiddle2: false,
      hiddle3: false,
      timer: -1
    }
  }
  render() {
    return (
      <div className="PCPAW">
        <div className="imgbox">
          <div className="textbox">
            <h1>美好生活，触手可得</h1>
            <div className="dot first">
              <span className="dot1"></span>
              <span className="dot2"></span>
            </div>
            <div className="dot second">
              <span className="dot1"></span>
              <span className="dot2"></span>
            </div>
            <div className="dot third">
              <span className="dot1"></span>
              <span className="dot2"></span>
            </div>
            <div
              className={CNs({
                dot: true,
                red: true,
                hiddle1: this.state.hiddle1
              })}
            >
              <span className="dot1"></span>
              <span className="dot2"></span>
              <img
                style={{ animationName: this.state.flag1 ? 'man3' : 'none' }}
                src={require('./../../../../assets/Peisong/horseman.png')}
                alt=""
                className="man"
              />
            </div>
            <div
              className={CNs({
                dot: true,
                blue: true,
                hiddle1: this.state.hiddle2
              })}
            >
              <span className="dot1"></span>
              <span className="dot2"></span>
              <img
                style={{ animationName: this.state.flag2 ? 'man2' : 'none' }}
                src={require('./../../../../assets/Peisong/horseman.png')}
                alt=""
                className="man"
              />
            </div>
            <div
              className={CNs({
                dot: true,
                yellow: true,
                hiddle1: this.state.hiddle3
              })}
            >
              <span className="dot1"></span>
              <span className="dot2"></span>
              <img
                style={{ animationName: this.state.flag3 ? 'man1' : 'none' }}
                src={require('./../../../../assets/Peisong/horseman.png')}
                alt=""
                className="man"
              />
            </div>
          </div>
        </div>
        <section className="section1">
          <div className="container">
            <div className="secitem">
              <h2>关于蜂鸟配送</h2>
              <p>
                蜂鸟配送专注于即时配送领域，本地生活最后一公里。提供任意时间
                <br />
                的即时配送和同城配送服务，配送品类全、速度快，服务好，为您提
                <br />
                供极速的送达体验。
              </p>
            </div>
          </div>
        </section>
        <section className="section2">
          <div className="container">
            <div className="classabout">
              <h2 className="h21">联系我们</h2>
              <h4 className="h41">24小时客服热线</h4>
              <p className="p1">全国统一客服服务热线：10105757</p>
              <h4 className="h42">联系邮箱</h4>
              <p className="p1">
                <span className="span1">客户服务：</span>
                <span className="span2">tousu@ele.me</span>
              </p>

              <p className="p2">
                <span className="span1">商业合作：</span>
                <span className="span2">marketing_coop@ele.me</span>
              </p>
              <p className="p2">
                <span className="span1">媒体合作：</span>
                <span className="span2">pr@ele.me</span>
              </p>
              <h4 className="h43">公司地址</h4>
              <p className="p3 p1">
                上海市普陀区真北路788号近铁城市广场南座6楼
              </p>
              <h4 className="h44">关注我们</h4>
              <div className="wechat">
                <i></i>
                <p>蜂鸟骑手之家公众号</p>
                <div>
                  <img
                    src={require('./../../../../assets/Peisong/knight-home.jpg')}
                    alt=""
                  />
                </div>
              </div>
              <div className="wechat left30">
                <i></i>
                <p>开放平台公众号</p>
                <div>
                  <img
                    src={require('./../../../../assets/Peisong/open.jpeg')}
                    alt=""
                  />
                </div>
              </div>
              <div className="wechat left30">
                <i></i>
                <p>蜂鸟众包公众号</p>
                <div>
                  <img
                    src={require('./../../../../assets/Peisong/delivery.jpg')}
                    alt=""
                  />
                </div>
              </div>
              <div className="wechat left30">
                <i></i>
                <p>蜂鸟跑腿公众号</p>
                <div>
                  <img
                    src={require('./../../../../assets/Peisong/business.jpeg')}
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </section>
        <div className="imgbox imgbox1">
          <div className="textbox">
            <div className="mapbox">
              <img
                src={require('./../../../../assets/Peisong/square.jpg')}
                alt=""
                className="imgq"
              />
              <h2>公司</h2>
              <p>拉扎斯网络科技（上海）有限公司</p>
              <h2>地址</h2>
              <p>上海市普陀区真北路788号近铁城市广场南座6楼</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }
  getchecked1 = () => {
    var str = this.props.match.path
    var arr = str.split('/')
    const path = arr.pop()
    // console.log(path)
    switch (path) {
      case 'PCMain':
        window.location.reload(true)
        break
      case 'PCS':
        localStorage.setItem('check', 2)
        break
      case 'PCP':
        localStorage.setItem('check', 3)
        break
      case 'PCPAW':
        localStorage.setItem('check', 4)
        break
      default:
        break
    }
  }
  autoanimation = () => {
    clearTimeout(this.state.timer)
    this.setState({
      flag1: true
    })

    const timer = setTimeout(() => {
      this.setState({
        hiddle1: true,
        flag1: false
      })
      this.animation2()
    }, 2000)
    this.setState({
      timer: timer
    })
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getchecked1()
    this.autoanimation()

    // this.forceUpdate()
    //获取地址信息
    // window.opener.location.href = window.opener.location.href
  }
  animation2 = () => {
    clearTimeout(this.state.timer)
    this.setState({
      flag2: true
    })
    const timer = setTimeout(() => {
      this.setState({
        hiddle1: false,
        hiddle2: true,
        flag2: false
      })
      this.animation3()
    }, 3000)
    this.setState({
      timer: timer
    })
  }
  animation3 = () => {
    clearTimeout(this.state.timer)
    this.setState({
      flag3: true
    })
    const timer = setTimeout(() => {
      this.setState({
        hiddle2: false,
        hiddle3: true,
        flag3: false
      })
      this.animation1()
    }, 2000)
    this.setState({
      timer: timer
    })
  }
  animation1 = () => {
    clearTimeout(this.state.timer)
    this.setState({
      flag1: true
    })
    const timer = setTimeout(() => {
      this.setState({
        hiddle3: false,
        hiddle1: true,
        flag1: false
      })
      this.animation2()
    }, 2000)
    this.setState({
      timer: timer
    })
  }
}
